<template>
    <el-dialog v-model="formVisible" @close="closePage" :title="title" align-center width="25%">
        <el-form :model="formData" label-width="85px" :rules="formRules" ref="formRef">
            <el-form-item label="父级权限">
                <el-tree-select :props="permProps" v-model="formData.parentId" :data="sysPermTree" check-strictly
                    clearable default-expand-all :render-after-expand="false" check-on-click-node />
            </el-form-item>
            <el-form-item label="权限类型" prop="type">
                <el-radio-group v-model="formData.type">
                    <el-radio-button label="目录" value="1" />
                    <el-radio-button label="菜单" value="2" />
                    <el-radio-button label="按钮" value="3" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="权限名称" prop="name">
                <el-input v-model="formData.name" autocomplete="off" />
            </el-form-item>
            <el-form-item v-if="formData.type == '2' || formData.type == '3'" label="权限" prop="perm">
                <el-input v-model="formData.perm" autocomplete="off" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="sort">
                <el-input-number v-model="formData.sort" :min="1" />
            </el-form-item>
            <el-form-item v-if="formData.type == '1' || formData.type == '2'" label="图标">
                <el-space>
                    <el-input v-model="$store.state.menuIcon" placeholder="请选择图标">
                        <template #prepend>
                            <el-button :icon="$store.state.menuIcon" />
                        </template>
                        <template #append>
                            <el-button @click="openIconsPage">选择图标</el-button>
                        </template>
                    </el-input>
                </el-space>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closePage">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
    <IconsDialogVue ref="iconsDialogRef"></IconsDialogVue>
</template>
<script setup>
import IconsDialogVue from '@/views/sys/perm/IconsDialog.vue';
import { reactive, ref } from "vue";
import { addReq, updateReq, queryTreeMenuReq } from '@/api/sys/perm/index.js'
import { success } from '@/utils/messageUtils.js'
import { useStore } from "vuex";
const store = useStore();
const permProps = { label: 'name', value: 'id', children: 'children' }

const formRules = reactive({
    name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择权限类型', trigger: 'blur' }],
    perm: [{ required: false, message: '请输入权限', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
})

const formData = reactive({
    id: null,
    name: '',
    parentId: null,
    type: '1',
    perm: '',
    sort: 1,
    icon: store.state.menuIcon,
})

const sysPermTree = ref([])
const formVisible = ref(false)
const title = ref()
const isAdd = ref(true)
const open = (type, row) => {
    Promise.all([
        queryTreeMenuReq(),
    ]).then(([treeMenuRes
    ]) => {
        sysPermTree.value = treeMenuRes.data;
        // 重置表单
        formRef.value?.resetFields()
        if (type == 'updateRow') {
            title.value = '修改菜单'
            isAdd.value = false

            formData.id = row.id
            formData.name = row.name
            formData.parentId = (row.parentId == 0 ? null : row.parentId)
            formData.type = row.type
            formData.perm = row.perm
            formData.sort = row.sort
            store.commit('SET_MENU_ICON', row.icon);
            formData.icon = row.icon
        } else {
            title.value = '添加菜单'
            isAdd.value = true

            formData.id = null
            formData.name = ''
            if (type == 'add') {
                formData.parentId = null
            } else if (type == 'addRow') {
                formData.parentId = row.id
            }
            formData.type = '1'
            formData.perm = ''
            formData.sort = 1
            store.commit('SET_MENU_ICON', '');
            formData.icon = ''
        }
        formVisible.value = true;
    });
}

const addOrUpdate = () => {
    formRef.value.validate((isValidate, fields) => {
        if (isValidate) {
            // 设置图标
            formData.icon = store.state.menuIcon;
            formData.parentId = (formData.parentId == null ? 0 : formData.parentId)
            if (isAdd.value) {
                addReq(formData).then(res => {
                    if (res.code == 200) {
                        success("添加权限" + formData.name + "成功！");
                        props.queryTree();
                        // 触发左侧菜单栏改变
                        store.dispatch("getUserInfo")
                        closePage();
                    }
                })
            } else {
                updateReq(formData).then(res => {
                    if (res.code == 200) {
                        success("修改权限" + formData.name + "成功！")
                        props.queryTree();
                        // 触发左侧菜单栏改变
                        store.dispatch("getUserInfo")
                        closePage();
                    }
                })
            }
        }
    });
}

const formRef = ref()
const closePage = () => {
    formRef.value.resetFields();
    formVisible.value = false
}

const props = defineProps({
    queryTree: Function,
})

defineExpose({
    open,
})

const iconsDialogRef = ref();
const openIconsPage = () => {
    iconsDialogRef.value?.open();
}
</script>